<template>
    <el-container>
        <el-header style="text-align: center; font-size: 30px">
            <i class="el-icon-setting" style="margin: 0"><span>博客大数据分析系统</span></i>
        </el-header>

        <el-main>

            <body>
            <div :style="conTop" class="background-img"></div>

            <div id="box">
                <el-button @click="changeScene" type="primary" style="margin: 0 auto;margin-top: 200px;width: 250px;height: 80px" >开始探索</el-button>
                <div class="box1 one"></div>
                <div class="box2 one"></div>

            </div>
            </body>
        </el-main>
        <el-footer>
            <el-row :gutter="20">
                <el-col :span="4"><div class="grid-content bg-purple" style="text-align: center;font-size: 20px;">卓金鑫</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-dark" style="text-align: center;font-size: 20px;">展浩翔</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple" style="text-align: center;font-size: 20px;">周东民</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-dark" style="text-align: center;font-size: 20px;">章锦川</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple" style="text-align: center;font-size: 20px;">吴日华</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-dark" style="text-align: center;font-size: 20px;">黄浠沿</div></el-col>
            </el-row>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        name: "try2",
        data() {
            return {
                conTop: {
                    backgroundImage: 'url(' + require('../images/bg2.jpg') + ')',
                }
            }
        },
        methods: {
            changeScene() {
                const _this = this
                _this.$router.push('/index')
            }
        }
    }

</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }
    .background-img {
        background: no-repeat center top;
        background-size: cover;
        height: 1080px;
        width: 2560px;
    }
    #box {
        width: 400px;
        height: 400px;
        position: fixed;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        transform-style: preserve-3d;
    }

    .box1 {

        animation: go 1s linear infinite;
        transform: rotateX(90deg);
    }

    .box2 {
        animation: go 2s linear infinite;
        transform: rotateX(180deg);
    }

    .one {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 0px;
        right: 0;
        top: 80px;
        bottom: 0;
        margin: auto;
        border: 3px solid #53A4F8;
        transform-style: preserve-3d;
        border-radius: 50%;
        box-shadow: 0 0 50px #fff;
    }

    .two {
        width: 700px;
        height: 700px;
        position: absolute;
        left: -100px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px solid #53A4F8;
        transform-style: preserve-3d;
        border-radius: 50%;
        box-shadow: 0 0 50px #53A4F8;
    }

    @keyframes go {
        0% {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }
        100% {
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>